<template>
    <div class="custom-dropdown" :class="{ 'is-open': isOpen }">
      <!-- 下拉框触发器 -->
      <div 
        class="dropdown-trigger"
        @click="toggleDropdown"
        @blur="handleBlur"
        tabindex="0"
        :title="placeholder"
      >
        <span class="dropdown-value">{{ displayValue }}</span>
        <i class="dropdown-arrow sjqeditor xiajiantou"></i>
      </div>
      
      <!-- 下拉选项列表 -->
      <div v-if="isOpen" class="dropdown-menu">
        <div 
          v-for="option in options" 
          :key="option.value"
          class="dropdown-option"
          :class="{ 'is-selected': option.value === modelValue }"
          @click="selectOption(option)"
          @mouseenter="hoveredOption = option"
          @mouseleave="hoveredOption = null"
        >
          <span class="option-label">{{ option.label }}</span>
          <i v-if="option.value === modelValue" class="option-check sjqeditor duigou"></i>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'CustomDropdown',
    props: {
      // 当前选中的值
      modelValue: {
        type: [String, Number],
        default: ''
      },
      // 选项列表
      options: {
        type: Array,
        default: () => [],
        validator: (value) => {
          return value.every(option => 
            typeof option === 'object' && 
            'value' in option && 
            'label' in option
          )
        }
      },
      // 占位符文本
      placeholder: {
        type: String,
        default: '请选择'
      },
      // 是否禁用
      disabled: {
        type: Boolean,
        default: false
      },
      // 下拉框宽度
      width: {
        type: String,
        default: '120px'
      }
    },
    data() {
      return {
        isOpen: false,
        hoveredOption: null
      }
    },
    computed: {
      // 显示的值
      displayValue() {
        if (!this.modelValue) {
          return this.placeholder
        }
        const selectedOption = this.options.find(option => option.value === this.modelValue)
        return selectedOption ? selectedOption.label : this.placeholder
      }
    },
    mounted() {
      // 添加全局点击事件监听
      document.addEventListener('click', this.handleGlobalClick)
    },
    beforeUnmount() {
      // 移除全局点击事件监听
      document.removeEventListener('click', this.handleGlobalClick)
    },
    methods: {
      // 切换下拉框状态
      toggleDropdown() {
        if (this.disabled) return
        this.isOpen = !this.isOpen
        this.$emit('toggle', this.isOpen)
      },
      
      // 选择选项
      selectOption(option) {
        if (this.disabled) return
        
        this.$emit('update:modelValue', option.value)
        this.$emit('change', option)
        this.isOpen = false
      },
      
      // 处理失焦事件
      handleBlur(event) {
        // 延迟关闭，确保点击事件能够正常触发
        setTimeout(() => {
          this.isOpen = false
        }, 150)
      },
      
      // 处理全局点击事件
      handleGlobalClick(event) {
        if (!this.$el.contains(event.target)) {
          this.isOpen = false
        }
      }
    }
  }
  </script>
  
  <style scoped>
  .custom-dropdown {
    position: relative;
    display: inline-block;
    width: v-bind(width);
    user-select: none;
  }
  
  .dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    height: 32px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #ffffff;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }
  
  .dropdown-trigger:hover {
    border-color: #9ca3af;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
  }
  
  .dropdown-trigger:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  }
  
  .dropdown-value {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .dropdown-arrow {
    margin-left: 8px;
    font-size: 12px;
    color: #6b7280;
    transition: transform 0.2s ease;
  }
  
  .is-open .dropdown-arrow {
    transform: rotate(180deg);
  }
  
  .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
    animation: dropdownSlideIn 0.2s ease;
  }
  
  .dropdown-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 13px;
    color: #374151;
  }
  
  .dropdown-option:hover {
    background: #f3f4f6;
  }
  
  .dropdown-option.is-selected {
    background: #3b82f6;
    color: #ffffff;
  }
  
  .dropdown-option.is-selected:hover {
    background: #2563eb;
  }
  
  .option-label {
    flex: 1;
  }
  
  .option-check {
    font-size: 12px;
    color: inherit;
  }
  
  /* 禁用状态 */
  .custom-dropdown.disabled .dropdown-trigger {
    background: #f9fafb;
    color: #9ca3af;
    cursor: not-allowed;
    border-color: #e5e7eb;
  }
  
  .custom-dropdown.disabled .dropdown-trigger:hover {
    transform: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }
  
  /* 动画效果 */
  @keyframes dropdownSlideIn {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* 滚动条样式 */
  .dropdown-menu::-webkit-scrollbar {
    width: 6px;
  }
  
  .dropdown-menu::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
  }
  
  .dropdown-menu::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
  }
  
  .dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
  }
  </style> 